import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import classnames from 'classnames'
import { DNavBar } from '@/components'
import { AtInput, AtButton } from 'taro-ui'
import './applymoney.scss'
import http from "@/api";
const conf = require('../../../config/conf')

// const bankItem = require('../assets/bankbg.png')
// const btnbg = require('../assets/btn_bg.png')

export default class ApplymoneyBox extends Component {
  constructor(props) {
    super(props)
    this.state = {
      title: '申请提现',
      status: false,
      money: '',
      withdrawalAmount: 0, // 可提现余额
      totalMoney: 0, // 实际余额
      freezeMoney: 0 // 冻结余额
    }
  }

  async componentDidMount() {
    const { LISTS } = await http.getBalance()
    this.filterMoney(LISTS)
  }

  filterMoney(LISTS) {
    /*
      amtType：余额类型
      01：可用余额
      02：实际余额
      03：冻结金额
      04：待结算余额
      10：可用不可出金余额
      11：不可用可出金余额

      可出金余额 = 可用余额 - 可用不可出金余额 + 不可用可出金余额
    */
    let totalMoney, freezeMoney, temp1, temp2, temp3;
    LISTS.forEach(item => {
      item.amtType === "02" && (totalMoney = (item.amt / 100));
      item.amtType === "03" && (freezeMoney = item.amt / 100);
      item.amtType == '01' && (temp1 = item.amt);
      item.amtType == '10' && (temp2 = item.amt);
      item.amtType == '11' && (temp3 = item.amt);
    })
    this.setState({
      totalMoney,
      freezeMoney,
      usableMoney: temp2 / 100,
      withdrawalAmount: ((temp1 - temp2 + +temp3) / 100)
    })
  }

  handleChange = (value) => {
    if (value.split('.')[1] && value.split('.')[1].length > 2) {
      value = Number(value).toFixed(2)
    }

    this.setState({
      money: value
    }, () => {
      let status = false
      if (this.state.money) {
        status = true
      }
      this.handleMoney(status)
    })
  }
  handleMoney = (status) => {
    this.setState({
      status
    })
  }
  // 全部提现
  handleAllWithdraw = () => {
    const { withdrawalAmount } = this.state
    this.setState({
      money: withdrawalAmount,
      status: true
    });
  }
  // 提交申请
  handleSubmit = async () => {
    let { money, status, withdrawalAmount } = this.state;
    if (!status) return;
    if (+money > +withdrawalAmount) {
      return Taro.showToast({
        title: "提现金额不能大于可提现余额！",
        icon: "none"
      });
    }

    const { infoData, bodyData, signData } = await http.lcgWithdraw({ trAmt: money * 100 });
    this.setState({ infoData, bodyData, signData }, () => {
      this.refs.submit.click();
    });
  }
  // userbankHandle() {
  //     Taro.navigateTo({
  //         url: '/pages/userbank/userbank'
  //     })
  // }

  render() {
    const {
      title,
      status,
      money,
      infoData,
      bodyData,
      withdrawalAmount,
      totalMoney,
      freezeMoney,
      usableMoney,
      signData, } = this.state
    return (
      <View className="b_applymoney">
        <DNavBar title={title}></DNavBar>
        <View className="b_applymoney__box">
          <View className="b_applymoney__content">
            {/* <View className='b_applymoney__content_bank'>
                    <Image className='b_applymoney__image' src={bankItem}></Image>
                    <View className='b_applymoney__info'>
                        <View className='b_applymoney__info_name'>丽丽</View>
                        <View className='b_applymoney__info_bank'>广发银行广州大道支行</View>
                        <View className='b_applymoney__info_account'>***************1123</View>
                    </View>
                    <View className='b_applymoney__btn' onClick={this.userbankHandle.bind(this)}>
                        <Image className='b_applymoney__image' src={btnbg}></Image>
                        <Text className='b_applymoney__btn__text'>更换</Text>
                    </View>
                </View> */}
            <View className='b_applymoney__content_input'>
              <View className='b_applymoney__title'>提现金额</View>
              <View className='b_applymoney__input'>
                <View className='b_applymoney__input_flag'>¥</View>
                <AtInput type='number' className='b_applymoney__input_item' value={money}
                  onChange={this.handleChange.bind(this)}></AtInput>
              </View>
              <View className='b_applymoney__tip'>
                <View className='b_applymoney__tip_left'>可提现余额￥{withdrawalAmount}元</View>
                <View className='b_applymoney__tip_right all_withdraw' onClick={this.handleAllWithdraw}>全部提现</View>
              </View>
              <View className='b_applymoney__tip'>
                <View className='b_applymoney__tip_left'>实际余额￥{totalMoney}元</View>
                <View className='b_applymoney__tip_right'>冻结余额￥{freezeMoney}元</View>
              </View>
              <View className='b_applymoney__tip'>
                <View className='b_applymoney__tip_right'>可用不可出金余额￥{usableMoney}元</View>
              </View>
            </View>
          </View>
          <View className='b_applymoney_tip'>平台将在24小时内审核您的申请并拨款到您指定账户</View>
          <AtButton className={classnames('item_btn', status ? '' : 'item_btn__display')} onClick={this.handleSubmit}>提交申请</AtButton>
        </View>

        {/* 跳转龙存管页面 */}
        <form action={conf.fromURL} method="post">
          <input type="hidden" name="INFO" value={infoData} />
          <input type="hidden" name="CONTENTTYPE" value="json" />
          <input type="hidden" name="charset" value="GBK" />
          <input type="hidden" name="BODY" value={bodyData} />
          <input type="hidden" name="SIGN" value={signData} />
          <input type="submit" ref="submit" value="Submit" style={{ opacity: 0, width: 0, height: 0 }} />
        </form>
      </View>
    )
  }
}
